<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="textml; charset=UTF-8" />
    <title>图片压缩</title>
    <style>
        body {
            text-align: center;
        }

        .box {
            display: inline-block;
            max-width: 750px;
        }

        select {
            border: solid 1px #888;
            border-radius: 5px;
            padding: 10px;
        }

        #fileinput {
            border: solid 1px #888;
            width: 500px;
            border-radius: 5px;
            padding: 10px;
        }

        .btns {
            background-color: #fff;
            border: solid 1px #ccc;
            color: #ccc;
            display: inline-block;
            width: 200px;
            padding: 10px;
            border-radius: 5px;
            cursor: pointer;
            outline: none;
        }
    </style>
</head>

<body>
    <div class="box">
        <br />
        <div class="configuration">
            jpg图片压缩比例：
            <select id="quality">
                <option value="0.8">20%</option>
                <option value="0.6">40%</option>
                <option value="0.4">60%</option>
                <option value="0.2">80%</option>
            </select>
            &nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;
            图片最大宽度：
            <select id="maxwidth">
                <option value="750">750</option>
                <option value="640">640</option>
                <option value="375">375</option>
                <option value="320">320</option>
            </select>
            px
        </div>
        <br />
        <input type="file" multiple="multiple" id="fileinput" ref="input" />
        <br /><br />
        <button type="button" class="btns" id="downloadBtn">下载</button>
        <button type="button" class="btns" id="AddWarter" onclick="DOMContentLoaded()">加水印</button>
        <br /><br />
        <div id="loading"></div>
        <br />
        <div id="imgbox"></div>
        <div id="ShowWater" style="width:300px;height:300px"/>
    </div>
    <!-- 下面jszip文件用于生成压缩文件zip -->
    <script type="text/javascript" src="jszip/jszip.min.js"></script>
    <script type="text/javascript" src="jszip/FileSaver.js"></script>
    <!-- 下面文件用户压缩图片 -->
    <script type="text/javascript" src="js/JCompressor.js"></script>
    <script type="text/javascript" src="js/AddWarter.js"></script>
    <script>
        document.getElementById("fileinput").addEventListener("change", inputchange)
        function inputchange(_this) {
            var _this = this;
            var quality = document.getElementById("quality").value;
            var maxWidth = document.getElementById("maxwidth").value;
            var loadingDom = document.getElementById("loading");
            JCompressor(_this, {
                Quality: Number(quality),
                MaxWidth: Number(maxWidth),
                PreviewContainer: "imgbox",
                FileLoad: function (filedata) {
                    _this.value = "";
                },
                NeedDownload: true,
                DownloadLoad: function (nextfn) {
                    var btnDom = document.getElementById("downloadBtn");
                    btnDom.style.color = "blue";
                    btnDom.style.borderColor = "blue";
                    btnDom.onclick = function () {
                        nextfn();
                        btnDom.onclick = null;
                        btnDom.style.color = "";
                        btnDom.style.borderColor = "";
                    }
                },
                ChangeBefore: function () {
                    loadingDom.innerHTML = "处理中······";
                },
                ChangeAfter: function () {
                    loadingDom.innerHTML = "";
                }
            })
        } 
    </script>

    <script>
        function DOMContentLoaded() {
            var Compressor = window.Compressor;
            var URL = window.URL || window.webkitURL;
            //var image = document.getElementById('image');
            var image = document.getElementById('imgbox').firstChild;

            var output = document.getElementById('ShowWater');
            var xhr = new XMLHttpRequest();

            xhr.onload = function () {
                new Compressor(xhr.response, {
                    strict: false,
                    drew: function (context, canvas) {
                        context.fillStyle = '#fff';
                        context.font = '2rem serif';
                        context.fillText('Powered by Compressor.js', 20, canvas.height - 20);
                    },
                    success: function (result) {
                        var newImage = new Image();

                        newImage.src = URL.createObjectURL(result);
                        newImage.alt = 'Compressed image';
                        output.appendChild(newImage);
                    },
                    error: function (err) {
                        window.alert(err.message);
                    },
                });
            };

            xhr.open('GET', image.src);
            xhr.responseType = 'blob';
            xhr.send();
        };


    </script>


</body>

</html>